<template>
  <el-card shadow="always">
    <el-table v-loading="loading" :data="skuList">
      <el-table-column type="index" label="序号" width="80">
      </el-table-column>
      <el-table-column prop="skuName" label="名称" width="160"></el-table-column>
      <el-table-column prop="skuDesc" label="描述" width="180"></el-table-column>
      <el-table-column v-slot="{ row }" label="默认图片" width="150">
        <img :src="row.skuDefaultImg" alt="" style="width: 100px">
      </el-table-column>
      <el-table-column prop="weight" label="重量(KG)"></el-table-column>
      <el-table-column prop="price" label="价格(元)"></el-table-column>
      <el-table-column v-slot="{ row }" label="操作" width="220">
        <el-tooltip class="box-item" effect="dark" :content="row.isSale ? '下架' : '上架'" placement="top">
          <el-button @click="handleUpdateSaleState(row)" :type="row.isSale ? 'success' : 'info'"
            :icon="row.isSale ? Bottom : Top" size="small"></el-button>
        </el-tooltip>
        <el-tooltip class="box-item" effect="dark" content="修改" placement="top">
          <el-button @click="handleEdit" type="primary" :icon="EditPen" size="small"></el-button>
        </el-tooltip>
        <el-tooltip class="box-item" effect="dark" content="查看详细" placement="top">
          <el-button @click="lookDetail(row)" type="info" :icon="InfoFilled" size="small"></el-button>
        </el-tooltip>
        <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
          <el-button @click="handleDelete(row)" type="danger" :icon="Delete" size="small"></el-button>
        </el-tooltip>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="page" v-model:page-size="limit" :page-sizes="[3, 5, 10, 20, 50]"
      layout="prev, pager, next, jumper, ->, sizes, total, " :total="total" style="margin-top: 15px"
      @size-change="handleSizeChange" @current-change="handleCurrentChange">
    </el-pagination>

    <!-- sku 详细信息 -->
    <el-drawer v-model="skuDetailVisible" title="SKU" direction="rtl" :before-close="handleClose" size="560px">
      <el-form label-width="80px" style="font-weight: bold; font-size:2em">
        <el-form-item label="名称">
          {{ currentSku?.skuName }}
        </el-form-item>
        <el-form-item label="描述">
          {{ currentSku?.skuDesc }}
        </el-form-item>
        <el-form-item label="价格">
          {{ currentSku?.price }}
        </el-form-item>
        <el-form-item label="平台属性">
          <el-tag v-for="skuAttrValue in currentSku?.skuAttrValueList" :key="skuAttrValue.id"
            style="margin-right:5px; margin-bottom: 3px">
            {{ skuAttrValue.valueName }}</el-tag>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-carousel width="360px">
            <el-carousel-item v-for="skuImage in currentSku?.skuImageList" :key="skuImage.id" style="width:360px">
              <img :src="skuImage.imgUrl" style="width: 360px" />
            </el-carousel-item>
          </el-carousel>
        </el-form-item>
      </el-form>
    </el-drawer>
  </el-card>
</template>

<script lang="ts">
export default {

}
</script>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { EditPen, Bottom, InfoFilled, Delete, Top } from '@element-plus/icons-vue'
import { reqGetSkuList, reqCancelSale, reqOnSale, reqDeleteSkuInfo, reqGetSkuInfo } from '@/api/product/sku'
import type { skuInfoModel } from '@/api/product/model/sku'
import { ElMessage } from 'element-plus'

// 响应性语法糖
import { $ref } from 'vue/macros'

let skuList = $ref<skuInfoModel[]>([])
const limit = ref(3)
const page = ref(1)
const total = ref(20)

let loading = $ref(false)
const getSkuList = async () => {
  loading = true
  const res = await reqGetSkuList(page.value, limit.value)
  skuList = res.records
  loading = false
}
// 挂载完成后获取skuList
onMounted(() => {
  getSkuList()
})
// 改变每页显示的数量
const handleSizeChange = (val: number) => {
  limit.value = val
  getSkuList()
}
// 改变当前页码
const handleCurrentChange = (val: number) => {
  page.value = val
  getSkuList()
}
// 上架 or 下架 sku
const handleUpdateSaleState = async (row: skuInfoModel) => {
  if (row.isSale) {
    await reqCancelSale(row.id as number)
    ElMessage.success('下架成功！')
    row.isSale = 0
  } else {
    await reqOnSale(row.id as number)
    ElMessage.success('上架成功')
    row.isSale = 1
  }
}
// 编辑 sku
const handleEdit = () => {
  ElMessage.info('正在开发中......')
}
// 删除 sku
const handleDelete = async (row: skuInfoModel) => {
  await reqDeleteSkuInfo(row.id as number)
  ElMessage.success('删除 SKU 成功！')
  // 删除成功后重新获取数据
  getSkuList()
}

// 查看 sku 详情
const skuDetailVisible = ref(false)
const currentSku = ref<skuInfoModel>()
const lookDetail = async (row: skuInfoModel) => {
  currentSku.value = await reqGetSkuInfo(row.id as number)

  skuDetailVisible.value = true
}
const getSkuInfo = async (skuId: number) => {
}
const handleClose = () => {
  skuDetailVisible.value = false
}
</script>

<style>
.tooltip-base-box {
  width: 600px;
}

.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tooltip-base-box .center {
  justify-content: center;
}

.tooltip-base-box .box-item {
  width: 110px;
  margin-top: 10px;
}

.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-carousel__container {
  width: 360px;
}
</style>